<template>
  <div class="loading">
    <div class="loader">
      <div class="bar" style="height: 10%; animation-delay: 0s"></div>
      <div class="bar" style="height: 20%; animation-delay: 0.1s"></div>
      <div class="bar" style="height: 30%; animation-delay: 0.2s"></div>
      <div class="bar" style="height: 40%; animation-delay: 0.3s"></div>
      <div class="bar" style="height: 30%; animation-delay: 0.4s"></div>
      <div class="bar" style="height: 20%; animation-delay: 0.5s"></div>
      <div class="bar" style="height: 10%; animation-delay: 0.6s"></div>
      <div class="bar" style="height: 20%; animation-delay: 0.7s"></div>
      <div class="bar" style="height: 30%; animation-delay: 0.8s"></div>
      <div class="bar" style="height: 40%; animation-delay: 0.9s"></div>
    </div>
    <div class="loader"></div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 竖条之间的间距 */
  align-items: center;
  width: 100%; /* 宽度为100% */
  height: 50px; /* 高度 */
}
.bar {
  width: 6px; /* 每个竖条的宽度 */
  background-color: #514b82; /* 竖条颜色 */
  animation: l14 2s infinite; /* 动画效果 */
  animation-play-state: running; /* 默认状态为运行 */
  animation: jump 1s infinite; /* 跳动动画 */
}
/* 定义每个竖条的高度和位置 */
.bar:nth-child(1) {
  height: 10%;
}
.bar:nth-child(2) {
  height: 20%;
}
.bar:nth-child(3) {
  height: 30%;
}
.bar:nth-child(4) {
  height: 40%;
}
.bar:nth-child(5) {
  height: 30%;
}
.bar:nth-child(6) {
  height: 20%;
}
.bar:nth-child(7) {
  height: 10%;
}
.bar:nth-child(8) {
  height: 20%;
}
.bar:nth-child(9) {
  height: 30%;
}
.bar:nth-child(10) {
  height: 40%;
}
/* 定义跳动动画 */
@keyframes jump {
  0%,
  100% {
    height: 10%; /* 初始和结束高度 */
  }
  50% {
    height: 40%; /* 中间高度 */
  }
}
@keyframes l14 {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1; /* 中间高峰时的透明度 */
  }
  100% {
    opacity: 0.5;
  }
}
</style>
